<template>
	<view style="width: 99.4%;">
		<view class="head">
			<view class="head__time">{{detail.createTime}}</view>
			<view class="head__status">
				<view :class="detail.orderStatus == 0?'color-bule':(detail.orderStatus == 1|| detail.orderStatus == 2)?'color-green':'color-red'">{{detail.orderStatus == 0?'待接受':detail.orderStatus == 1?'已接受':detail.orderStatus == 2?'已完成':detail.orderStatus == 3?'已取消':'已拒绝'}}</view>
			</view>
		</view>
		<view class="info">
			<view class="info__content" v-for="(item, index) in detail.appFoodOrderListList" :key="index">
				<image class="info__content__img" @click.stop="previewImage(item.foodImg)" :src="item.foodImg" mode="aspectFill"></image>
				<view class="info__content__name">{{item.foodName}}</view>
				<view class="info__content__name">数量:{{item.foodSize}}</view>
			</view>
			<view class="info__kong" v-if="detail.appFoodOrderListList.length%3" v-for="kongItem in (3-detail.appFoodOrderListList.length%3)"></view>
		</view>
		<view class="notes" v-if="detail.orderInfo">
			<text class="">备注:{{detail.orderInfo}}</text>
		</view>
		<view class="all">
			<view class="all__box">
				<text class="all__box__text">共{{detail.orderFoodNum}}件</text>
				<text class="all__box__price">实际付款&nbsp&nbsp&nbsp￥{{detail.orderPrice}}</text>
			</view>
		</view>
		<view class="unorder" v-if="detail.orderStatus == 0" @click="ThisOrder(detail.id)">
			<view class="unorder__text">
				取消订单
			</view>
		</view>
		<view class="up-order-box" v-if="is_this_order">
			<view class="up-order-box__content">
				<view class="up-order-box__content__title">
					是否确定取消订单
				</view> 
				<view class="up-order-box__content__button">
					<view class="up-order-box__content__button__no" @click="unThisOrder">取消</view>
					<view class="up-order-box__content__button__yes" @click="yesThisOrder">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {Debounce} from 'common/utils.js' // 防抖函数（减少函数的调用）
	
	export default {
		data() {
			return {
				detail: {}, //订单详情
				this_order_id: '', //订单id
				is_this_order: false, //取消订单弹窗
				this_order_info: '', //取消订单的备注
			}
		},
		onLoad(e) {
			let self = this
			self.detail = JSON.parse(decodeURIComponent(e.item))
			console.log(self.detail);
		},
		methods: {
			/**
			 * @name 取消订单弹框
			 */
			ThisOrder:Debounce(
			function(id){
				this.this_order_id = id
				this.is_this_order = true
			}),
			/**
			 * @name 订单弹窗取消
			 */
			unThisOrder() {
				this.this_order_info = ''
				this.is_this_order = !this.is_this_order
			},
			/**
			 * @name 取消订单
			 */
			yesThisOrder() {
				let self = this
				self.is_this_order = !self.is_this_order
				//取消订单
				self.$api.fAppFoodOrderCancel({
					id:self.this_order_id,
					orderCancelInfo:self.this_order_info
				}).then(res => {
					console.log(res)
					setTimeout(function() {
						uni.showToast({
							title:'订单已取消',
							icon:'none',
							duration:2000
						})
					},400)
					self.this_order_id = ''
					self.this_order_info = ''
					self.$set(self.detail,'orderStatus',3)
					uni.$emit('food_order')
				})
			},
			/**
			 * @name 放大图
			 * @param {Object} img 图片url
			 */
			previewImage(img) {
				uni.previewImage({
					current: img, // 当前显示图片的http链接
					urls: [img] // 需要预览的图片http链接列表
				});
			}
		}
	}
</script>

<style lang="less">
	.head {
		background-color: #FFFFFF;margin-left: 36rpx;width: 90%;border-bottom: 1rpx solid rgba(248,248,248,1);margin-top: 28rpx;display: flex;align-items: center;justify-content: space-between;
		&__time {
			width: 90%;font-size: 24rpx;margin-left: 36rpx;color: rgba(102,102,102,1);
		}
		&__status {
			width: 126rpx;font-size: 28rpx;display: flex;align-details: center;justify-content: center;margin-right: 22rpx;
		}
	}
	.info {
		margin-left: 36rpx;width: 90%;background-color: #FFFFFF;display: flex;align-details: center;justify-content: space-between;flex-wrap: wrap;
		&__content {
			width: 202rpx;height: 222rpx;border-radius: 12rpx; display: flex;align-items: center;margin-top: 32rpx;flex-direction: column;
			&__img {
				width: 100%;height: 202rpx;border-radius: 12rpx;
			}
			&__name {
				width: 100%;display: flex;align-items: center;justify-content: center;font-size: 22rpx;color: #000000;
			}
		}
		&__kong {
			opacity: 0;width: 202rpx;height: 222rpx;border-radius: 12rpx; display: flex;align-items: center;margin-top: 32rpx;flex-direction: column;
		}
	}
	.all {
		margin-left: 36rpx;width: 90%;background-color: #FFFFFF;height: 76rpx;position: relative;
		&__box {
			position: absolute;top: 12rpx;right: 6rpx;
			&__text {
				font-size: 32rpx;color: rgba(49,114,182,1);margin-right: 8rpx;
			}
			&__price {
				font-size: 32rpx;color: rgba(49,114,182,1);
			}
		}
	}
	.notes {
		width: 90%;margin-left: 36rpx;font-size: 26rpx;border-top: 1rpx solid rgba(231, 236, 231, 1.0);margin-top: 22rpx;padding-top: 12rpx;
	}
	.unorder {
		margin-left: 36rpx;width: 90%;background-color: #FFFFFF;height: 126rpx;position: relative;
		&__text {
			font-size: 30rpx;width: 200rpx;height: 66rpx;background-color: #e12;color: #FFFFFF;border-radius: 33rpx;display: flex;align-items: center;justify-content: center;position: absolute;top: 28rpx;right: 6rpx;
		}
	}
	.up-order-box {
		width: 100%;height: 100%;background-color: rgba(0,0,0,0.5); position: fixed;top: 0rpx;left: 0rpx;
		&__content {
			width: 560rpx;height: 264rpx;border: 2rpx solid rgba(0,0,0,0.04);background-color: #FFFFFF;position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);border-radius: 12rpx;overflow: hidden;
			&__title {
				font-size: 28rpx;height: 182rpx;font-weight: 700;display: flex;align-items: center;justify-content: center;
			}
			&__button {
				width: 100%;height: 82rpx;display: flex;align-items: center;border-top: 2rpx solid rgba(0,0,0,0.04);
				&__no {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;color: rgba(153,153,153,1);background-color: #FFFFFF;font-size: 30rpx;
				}
				&__yes {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;border-left: 2rpx solid rgba(0,0,0,0.04);color: rgba(49,114,182,1);background-color: #FFFFFF;font-size: 30rpx;font-weight: 700;
				}
			}
		}
	}
	.unorder-box {
		width: 100%;height: 100%;background-color: rgba(0,0,0,0.5); position: fixed;top: 0rpx;left: 0rpx;
		&__content {
			width: 560rpx;height: 448rpx;border: 2rpx solid rgba(0,0,0,0.04);background-color: #FFFFFF;position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);border-radius: 12rpx;overflow: hidden;
			&__title {
				font-size: 28rpx;height: 88rpx;font-weight: 700;display: flex;align-items: center;justify-content: center;
			}
			&__text {
				margin-left: 30rpx;font-size: 24rpx;color: rgba(102,102,102,1);font-weight: 700;
			}
			&__area {
				padding: 30rpx; height: 184rpx;
				&__text {
					padding: 30rpx;font-size: 28rpx;border: 2rpx solid rgba(0,0,0,0.04);width: 87.4%;height: 64.4%;background-color: rgba(248,248,248,1);
				}
			}
			&__button {
				width: 100%;height: 82rpx;display: flex;align-items: center;border-top: 2rpx solid rgba(0,0,0,0.04);
				&__no {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;color: rgba(153,153,153,1);background-color: #FFFFFF;font-size: 30rpx;
				}
				&__yes {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;border-left: 2rpx solid rgba(0,0,0,0.04);color: rgba(49,114,182,1);background-color: #FFFFFF;font-size: 30rpx;font-weight: 700;
				}
			}
		}
	}
	.color-bule {
		color: rgba(49,114,182,1);
	}
	.color-green {
		color: rgba(78, 235, 115, 1);
	}
	.color-red {
		color: rgba(234, 0, 0, 1);
	}
</style>
